import React from 'react';
import { connect } from 'react-redux'
import menuRoute from "routes/menuRoute";
import {Table, Popover, Input, Switch} from 'antd';
const { Search } = Input;
import BankCompanyManagementService from 'containers/supplier-management/bank-company-management/bank-company-management.service'
import {messages} from "share/common";
import moment from "moment";

class BankCompanyManagement extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      data: [],
      page: 0,
      pagination: {
        total: 0,
      },
      columns: [
        {
          title: messages('supplier.key583')/*账户名称*/, dataIndex: 'bankAccountName', render: (text) => {
            return (
              <Popover placement="topLeft" content={text}>{text}</Popover>
            )
          }
        },
        {
          title: messages('supplier.key584')/*银行账号*/, dataIndex: 'bankAccountNumber', render: (text) => {
            return (
              <Popover placement="topLeft" content={text}>{text}</Popover>
            )
          }
        },
        {
          title: messages('supplier.key585')/*银行名称*/, dataIndex: 'bankName', render: (text) => {
            return (
              <Popover placement="topLeft" content={text}>{text}</Popover>
            )
          }
        },
        {
          title: messages('common.remark')/*备注*/, dataIndex: 'remark', render: text => {
            return (
              <Popover placement="topLeft" content={text}>{text}</Popover>
            )
          }
        },
        {
          title: messages('supplier.key586')/*所属公司*/, dataIndex: 'company', render: text =>{
            return (
              <Popover placement="topLeft" content={text}>{text}</Popover>
            )
          }
        },
        {
          title: messages('supplier.key587')/*关联订单*/, dataIndex: 'orderCode', render: (text) => {
            return (
              <Popover placement="topLeft" content={text}>{text}</Popover>
            )
          }
        },
        {
          title: messages('supplier.key224')/*开通日期*/, dataIndex: 'effectiveDate', render: (text) => {
            return (
              <Popover placement="topLeft" content={text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : null}>
                {text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : null}
              </Popover>
            )
          }
        },
        {
          title: messages('supplier.key225')/*到期日期*/, dataIndex: 'expireDate', render: text => {
            return (
              <Popover placement="topLeft" content={text ? moment(text).format('YYYY-MM-DD HH:mm:ss'): null}>
                {text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : null}
              </Popover>            )
          }
        },
        {
          title: messages('supplier.key226')/*是否启用*/, dataIndex: 'status', render: (value, record) => (this.renderCheck(value, record))
        },
      ],
      visible: false,
      keyword: "",
    }
  }


  componentWillMount() {
    this.getTableData();
  }

  //获取映射关系
  getTableData = () => {
    const {keyword, page} = this.state;
    this.setState({
      loading: true,
    });
    BankCompanyManagementService.getTableData(keyword, page).then(res => {
      res.data.map(item => {
        item.company = item.companyCode ? `${item.companyCode}-${item.companyName}` : item.companyName;
      });
        this.setState({
          data: res.data,
          loading: false,
          pagination: {
            total: Number(res.headers['x-total-count']),
            current: this.state.page + 1,
            onChange: this.onChangePaper,
          }
        })
      }
    ).catch(err => {
      this.setState({
        loading: false,
      });
    })
  };

  //点击分页
  onChangePaper = (page) => {
    if (page - 1 !== this.state.page) {
      this.setState({
          page: page - 1,
        }, () => {
          this.getTableData();
        }
      )
    }
  };

  renderCheck = (text, record) => {
    return(
      <div>
        <Switch checked={record.status} onChange={(checked) => this.changeCheck(checked, text, record)}/>
        <span>&nbsp;{text ? messages('common.status.enable')/*启用*/ : messages('common.status.disable')/*禁用*/}</span>
      </div>
    )
  };

  changeCheck = (checked, text, record) => {
    this.setState({
      loading: true,
    });
    if(checked){
      this.enableStatus(record.legalEntityId)
    }else{
      this.disableStatus(record.id)
    }
  };

  enableStatus = (id) => {
    BankCompanyManagementService.enableStatus({legalEntityId: id}).then(res => {
        this.setState({
          loading: false,
        }, () => {
          this.getTableData();
        });
      }
    ).catch(err => {
      this.setState({
        loading: false,
      });
    })
  };

  disableStatus = (id) => {
    BankCompanyManagementService.disableStatus({id: id}).then(res => {
        this.setState({
          loading: false,
        }, () => {
          this.getTableData();
        });
      }
    ).catch(err => {
      this.setState({
        loading: false,
      });
    })
  };

  onSearch = (value) => {
    this.setState({
      keyword: value,
      page: 0,
    }, () => {
      this.getTableData();
    })
  };

  render (){
    const {pagination, loading, data, columns, } = this.state;
    return(
      <div>
        <div>
          <div style={{float: "left", marginTop: 10}}>{messages('supplier.key588',{arg1: pagination.total})/*共搜索到{arg1}条数据*/}</div>
          <div style={{float: "right"}}>
            <Search placeholder={messages('supplier.key589')/*请输入账户名称/账号*/} onSearch={this.onSearch} enterButton />
          </div>
        </div>
        <div style={{float: "left"}}>
          <br/>
        <Table rowKey={(reCode) => {return `${reCode.legalEntityId}${reCode.id}`}}
               loading={loading}
               dataSource={data}
               columns={columns}
               pagination={pagination}
               size="middle"
               bordered/>
        </div>
        <div className="clear"/>
      </div>
    )
  }
}


BankCompanyManagement.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
  }
}


export default connect(mapStateToProps)(BankCompanyManagement);
